<template>
  <view class="order_pay">
    <!-- <uv-navbar
      placeholder
      class="head"
      leftIconColor="#fff"
      bg-color="transparent"
      title="支付订单"
      @leftClick="leftClick"
    ></uv-navbar> -->
    <view v-if="amount" class="cost">¥{{ amount }}</view>
    <view
      :class="['pay-item', { act: payWay === 'wx' }]"
      @click="onPayWay('wx')"
    >
      <image src="https://wealth-1311286543.cos.ap-guangzhou.myqcloud.com/taoshe/static//shop/img_wx_logo.png" class="icon"></image>
      <text>微信支付</text>
    </view>
    <!-- <view
      :class="['pay-item', { act: payWay === 'zfb' }]"
      @click="onPayWay('zfb')"
    >
      <image src="/static/shop/img_zfb_logo.png" class="icon"></image>
      <text>支付宝支付</text>
    </view> -->
    <view class="address_bottom">
      <view class="address_bottom_btn" @click="handleOnPay">确认支付</view>
    </view>
  </view>
</template>

<script>
// import { DebounceFn } from "@/utils/common";
import debounce from "@/utils/debounce";
import payment from "@/utils/payment";

function toPayPage(url, path, order_id) {
  const targetPage = `${window.location.origin}${path}?orderId=${order_id}`;
  const targetUrl = url + "&url=" + encodeURIComponent(targetPage);
  return targetUrl;
}
export default {
  components: {},
  data() {
    return {
      amount: null,
      order_id: null,
      payWay: "wx",
      payLoading: false
    };
  },
  onLoad(option) {
    if (option?.order_id) {
      this.order_id = option.order_id;
      this.amount = option.count;
    } else {
      uni.showToast({
        title: "未获取到orderId"
      });
    }
  },
  methods: {
    leftClick() {
      uni.navigateBack();
    },
    onPayWay(way) {
      this.payWay = way;
    },
    to_wode() {
      uni.reLaunch({
        url: "/pages/user/index"
      });
    },
    handleOnPay: debounce(async function () {
      if (!this.order_id) {
        uni.showToast({
          title: "未获取到orderId"
        });
        return;
      }
      await payment(this.order_id, "/pages/shop/index/order_success", () => {
        uni.redirectTo({
          url: "/pages/shop/index/order_success"
        });
      });
      // const res = await payment(this.order_id);
      // if (res.data.error_code === 0) {
      //   const url = toPayPage(
      //     res.data.data.url,
      //     "/pages/shop/index/order_success",
      //     this.order_id
      //   );
      //   window.location.href = url;
      // }
    }, 300)
  }
};
</script>

<style lang="scss" scoped>

.order_pay{
  background: #f9f9f9;
  height: calc(100vh - 64px);
  padding-top: 20px;

}

.cost {
  font-size: 56rpx;
  color: #ff4949;
  font-weight: 700;
  margin-bottom: 40px;
  text-align: center;
}

.pay-button {
  position: fixed;
  bottom: 54px;
  left: 50%;
  transform: translateX(-50%);
  width: 335px;
  height: 40px;
  border-radius: 10px;
  background-color: #1d545e;
  text-align: center;
  line-height: 40px;
  color: #92ffec;
  font-size: 14px;
}

.pay-item {
  position: relative;
  width: 335px;
  border-radius: 10px;
  padding: 15px 20px;
  margin: 0 auto;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  font-size: 14px;
  font-weight: 700;
  background: #fff;

  &::after {
    content: "";
    position: absolute;
    right: 20px;
    border-radius: 100%;
    width: 18px;
    height: 18px;
    // border: 1px solid #1d545e;
    top: 50%;
    margin-top: -9px;
  }

  .icon {
    width: 30px;
    height: 30px;
    margin-right: 15px;
  }

  &.act {
    // border: 1px solid #92ffec;

    &::after {
      border: none;
      background-image: url("https://wealth-1311286543.cos.ap-guangzhou.myqcloud.com/taoshe/static/shop/Group2143.png");
      background-size: cover;
    }
  }
}
</style>
